﻿<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>project_game_stagio_4</title>
		<meta name="description" content="">
		<meta name="author" content="Rodrigo">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap-responsive.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="libs/bootstrap/js/jquery-1.10.1.min.js"></script>
		<script src="libs/bootstrap/js/bootstrap.js"></script>
		<script src="libs/cycle.js"></script>
		<script src="scripts/script.js"></script>
	</head>

	<body>

		<div class="background">
			<div class="linha1"></div>
			<div class="linha2"></div>
		</div>
		<div class="container">
		
			<div id="apresentacao" class="altura_box">
				<br />
				<h1>Apresentação do Game</h1>
<br /><br />
<div class="row">
	<div class="span3"><img src="imagens/persona_apresentacao.png" /></div>
	<div class="span9"><div class="well"><h3>Movimento Vertical</h3>
Se largarmos uma pena e uma pedra de uma mesma altura, observamos que a pedra chegará antes ao chão.
<br><br>
Por isso, pensamos que quanto mais pesado for o corpo, mais rápido ele cairá. Porém, se colocarmos a pedra e a pena em um tubo sem ar (vácuo), observaremos que ambos os objetos levam o mesmo tempo para cair.
<br><br>
Assim, concluímos que, se desprezarmos a resistência do ar, todos os corpos, independente de massa ou formato, cairão com uma aceleração constante: a aceleração da Gravidade.
<br><br>
Quando um corpo é lançado nas proximidades da Terra, fica então, sujeito à gravidade, que é orientada sempre na vertical, em direção ao centro do planeta.<br>
	
		<br><br><button class="btn  next next_fase1" type="button" onclick="altura(1);">
					Jogar
				</button>
		</div></div>
</div>

				
			</div>
			<!-- slide_terra -->
			<div id="terra" class="altura_box">
				<div class="divisoria1"></div>
				<div class="divisoria2">
					<!-- maquina -->
					<div class="maquina"><img src="imagens/maquina.png">
					</div>
					
					<div class="well" id="formula"><h1><span class="velocidade1">v.</span>&sup2=v&#8320&sup2-2.<span class="gravidade" title="A gravidade na terra é de 9,8m/s mas vamos considerar 10m/s.">10</span>.&#916h</h1></div>
					
					<img class="tree" src="imagens/tree_.png">
					<div class="pastilha"></div>
					<div class="contraste_pastilha"></div>
					<div class="persona">
						<img src="imagens/persona1.png">
						
					</div>
					<div class="seta1"><span class="positionSeta"></span><!--<img src="imagens/arrow-left.svg">-->
					</div>

					<div class="feedback feedback_fase1">

						<div class="alert alert-success hide true1">
							<b>Parabéns!</b>
							<br><br>
							A velocidade necessária para alcançar a altura de <span class="h1"></span> no planeta Terra, segundo a Equação de Torricelli é: <span class='v1'></span>.<br><br>
							<b>v&sup2=v&#8320&sup2-2g&#916h</b> <br><b>v = <span class='v1'></span></b>
<br><br>
							<button class="btn btn-block next next_fase2" type="button" onclick="altura2(2);zeraMaquina();animation3();">
								Ir para próxima fase
							</button>
						</div>
						<div class="alert alert-error hide false1">
							<h4>Você não acertou dessa vez!</h4><br>
							Tente novamente ou click para visualizar a resposta.
							<br><br>
							<button class="btn gabarito1" type="button">
								Visualizar resposta
							</button><br><br>
							<b style="display:none" class="resultado1"></b>
												

						</div>
					</div>

					<!-- controle -->
					<div class="control" >
						<div class="well">
							<!--Velocidade: <span class="forca">0</span>-->
							<input type="range" value="0" id="range" class="rager1" name="points" min="1" max="100">

							<br>
							<br>
							<button class="btn  btn-block go_fase1" type="button" onclick="feeds(1);animation();">
								Tentar agora!
							</button>

						</div>
					</div>

				</div>
			</div>
			<!-- slide lua -->
			<div id="lua" class="altura_box">
				<div class="divisoria1"><img src="imagens/earth.png"></div>
				<div class="divisoria2">
					<!-- maquina -->
					<div class="maquina"><img src="imagens/maquina.png">
					</div>
					<div class="well" id="formula"><h1><span class="velocidade2">v</span>&sup2=v&#8320&sup2-2.<span class="gravidade" title="A gravidade na Luaé de 2,8m/s mas vamos considerar 3m/s.">3</span>.&#916h</h1></div>
					<div class="pastilha"></div>
					<div class="contraste_pastilha"></div>
					<div class="persona"><img src="imagens/persona1.png">
					</div>
					<div class="seta2"><span class="positionSeta"></span><!--<img src="imagens/arrow-left.svg">-->
					</div>

					<div class="feedback feedback_fase2">
						<div class="alert alert-success hide true2">
							<b>Parabéns!</b>
							<br><br>
							A velocidade necessária para alcançar a altura de <span class="h2"></span> na Lua, segundo a Equação de Torricelli é: <span class='v2'></span>.<br><br>
							<b>v&sup2=v&#8320&sup2-2g&#916h</b> <br><b>v = <span class='v2'></span></b>
<br><br>

							<button class="btn btn-block next next_fase3" type="button" onclick="altura3(3);zeraMaquina();animation3();">
								Ir para próxima fase
							</button>
						</div>
						<div class="alert alert-error hide false2">
							<h4>Você não acertou dessa vez!</h4><br>
							Tente novamente ou click para visualizar a resposta.
							<br><br>
							<button class="btn gabarito2" type="button">
								Visualizar resposta
							</button><br><br>
							<b style="display:none" class="resultado2"></b>

							

												</div>
					</div>

					<!-- controle -->
					<div class="control" >
						<div class="well">
							
							<input type="range" class="rager2" value="0" name="points" min="1" max="100">

							<br>
							<br>
							<button class="btn btn-block go_fase2" type="button" onclick="feeds(2);animation();">
								Tentar agora!
							</button>

						</div>
					</div>

				</div>

			</div>
			<div id="marte" class="altura_box">
				<div class="divisoria1"></div>
				<div class="divisoria2">
					<!-- maquina -->
					
					<div class="maquina"><img src="imagens/maquina.png">
					</div>
					<div class="well" id="formula"><h1><span class="velocidade3">v</span>&sup2=v&#8320&sup2-2.<span class="gravidade" title="A gravidade na em Marte é  de 22,8 m/s mas vamos considerar 23 m/s.">23</span>.&#916h</h1></div>
					<div class="pastilha"></div>
					<div class="contraste_pastilha"></div>
					<div class="persona"><img src="imagens/persona1.png">
					</div>
					<div class="seta3"><span class="positionSeta"></span><!--<img src="imagens/arrow-left.svg">-->
					</div>
					<div class="feedback feedback_fase3">
						<div class="alert alert-success hide true3">
							<b>Parabéns!</b>
							<br><br>
							A velocidade necessária para alcançar a altura de <span class="h2"></span> no Planeta Marte, segundo a Equação de Torricelli é: <span class='v2'></span>.<br><br>
							<b>v&sup2=v&#8320&sup2-2g&#916h</b> <br><b>v = <span class='v2'></span></b>
<br><br>

							<button class="btn btn-block next next_fase4" type="button" onclick="animation3();">
								Ir para próxima fase
							</button>
						</div>
						<div class="alert alert-error hide false3">
								<h4>Você não acertou dessa vez!</h4><br>
							Tente novamente ou click para visualizar a resposta.
							<br><br>
							<button class="btn gabarito3" type="button">
								Visualizar resposta
							</button><br><br>
							<b style="display:none" class="resultado3"></b>
						</div>
					</div>

					<!-- controle -->
					<div class="control" >
						<div class="well">
							
							<input type="range" class="rager3" value="0" name="points" min="1" max="300">

							<br>
							<br>
							<button class="btn  btn-block go_fase3" type="button" onclick="feeds(3);animation();">
								Tentar agora!
							</button>

						</div>
					</div>

				</div>

			</div>
			<div id="final">
		<br><br><br>
		
		<div class="span12"><img src="imagens/zerada.jpg"></div>
		
				
			</div>
		</div>
		<div class="container">
			<footer>
				<p>
					&copy; Copyright  by Alcantra, Antônio Paulo, Pedro Silva e Rodrigo Lins.
				</p>
			</footer>
		</div>
		<!-- /container -->
		<!-- audios -->
		<div id="audios" style="display:none">
		<audio class="som_wins" controls="controls"> <source src="som/berrante.mp3" type="audio/mp3" /> seu navegador não suporta HTML5 </audio>
		</div>


	</body>
</html>
<script>

	//chamada funcao base
	function feeds(fase) {
		$('.false' + fase).hide();
		$('.true' + fase).hide();

		var rager = $('.rager' + fase).val();
		
		
		//animation();
		
		//pega altura do storage
		
		var x = sessionStorage.getItem('altura');
		formula_fisica(rager, fase, x);

	};

	//randow altura terra
	function altura(fase) {
		var h = Math.floor((Math.random() * 500) + 20);
		var h0 = 311 - h;
		$('.seta'+fase).css({
			'margin-top' : h0 + 'px'
		});
		$('.positionSeta').html('<h4>'+h+'</h4>');
		$('.h1').html(h);
		sessionStorage.setItem('altura', h);
		
		return h;

	}
	//randow altura lua
	function altura2(fase) {
		var h = Math.floor((Math.random() * 500) + 20);
		var h0 = 311 - h;
		$('.seta'+fase).css({
			'margin-top' : h0 + 'px'
		});
		$('.positionSeta').html('<h4>'+h+'</h4>');
		$('.h2').html(h);
		sessionStorage.setItem('altura', h);
		
		return h;

	}
	//randow altura marte
	function altura3(fase) {
		var h = Math.floor((Math.random() * 500) + 20);
		var h0 = 311 - h;
		$('.seta'+fase).css({
			'margin-top' : h0 + 'px'
		});
			$('.positionSeta3').html('<h4>'+h+'</h4>');
			$('.h3').html(h);
		sessionStorage.setItem('altura', h);
		
		return h;

	}

	//formula real
	function formula_fisica(rager, fase, altura) {
		var v;
		

		if (fase == 1) {
			gravidade = 10;
		}
		if (fase == 2) {
			gravidade = 3;
		}
		if (fase == 3) {
			gravidade = 23;
		}

		
		animation_machine(rager,gravidade);
		valor = Math.sqrt(2 * gravidade * altura);
		v = valor.toFixed(0);
		
		//escrever no feedpositivo
		$('.v' + fase).html(rager);
		if (v == rager) {

			$('.true' + fase).fadeIn(2500);
			window.setTimeout('animation5()',2000);

		} else {
			$('.false' + fase).fadeIn(2500);
			//escreve no feedback fail
			$('.resultado' + fase).html(v);
		}

	}

	
function animation1(){
	$('.persona img').attr('src', 'imagens/persona2.png');
}
function animation2(){
	$('.persona img').attr('src', 'imagens/persona3.png');
}
function animation3(){
	$('.persona img').attr('src', 'imagens/persona1.png');
	$(".som_wins").trigger("pause");

}
function animation4(){
	$('.persona img').attr('src', 'imagens/persona1_1.png');

}
//wins
function animation5(){
	$('.persona img').attr('src', 'imagens/persona4.png');
	$(".som_wins").trigger("play");

}
function animation(){
window.setTimeout('animation2()',500);
window.setTimeout('animation3()',1000);
//window.setTimeout('animation3()',1500);
}

function piscar(){
	window.setTimeout('animation4()',500);
	window.setTimeout('animation3()',600);
}
function aleartorio(){
	var n= Math.floor((Math.random() * 7000) + 1000);
	 return n;
}
//window.setInterval('piscar()',aleartorio());

	//funcao animacao maquina
	function animation_machine(rager,gravidade) {
		
		
		//calcular altura em funcao da velocidade
		
		//valor = Math.sqrt(2 * gravidade * altura);
		altura=Math.sqrt((rager*rager/2*gravidade)*2);
		
		h = altura.toFixed(0);
		var newAltura = 0 + h;
		 var newPosition = 593 - h;
		 $(".pastilha").animate({
			 height : newAltura + 'px',
			 top : newPosition + 'px'
		 }, 1500);

	}
	
	function zeraMaquina(){
		$(".pastilha").animate({
			 height : '0px',
			 top : '593px'
		 }, 10);
	}

</script>